{%  extends 'base.html' %}

{% block title %} | Our Car Inventory {% endblock %}
{% block content %}
  {% load humanize %}
  <!-- Sub banner start -->
  <div class="sub-banner overview-bgi">
    <div class="container breadcrumb-area">
      <div class="breadcrumb-areas">
        <h1>Our Car Inventory</h1>
        <ul class="breadcrumbs">
          <li><a href="{% url 'home' %}">Home</a></li>
          <li class="active">Cars</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- Sub Banner end -->

  <!-- Featured car start -->
  <div class="featured-car content-area">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-12">

          <div class="row">
            {% for car in cars %}
              <div class="col-lg-6 col-md-6">
                <div class="car-box-3">
                  <div class="car-thumbnail">
                    <a href="{% url 'car_detail' car.id %}" class="car-img">
                      <div class="tag">For Rent</div>
                      <div class="price-box">
                        <span>${{ car.price | intcomma }}</span>
                      </div>
                      <img class="d-block w-100" src="{{ car.car_photo.url }}" alt="car" style="min-height: 262px; max-height: 262px;">
                    </a>
                    <div class="carbox-overlap-wrapper">
                      <div class="overlap-box">
                        <div class="overlap-btns-area">
                          <div class="car-magnify-gallery">
                            {% if car.car_photo1 %}
                              <a href="{{ car.car_photo1.url }}" class="overlap-btn">
                                <i class="fa fa-expand"></i>
                                <img class="hidden" src="{{ car.car_photo1.url }}">
                              </a>
                            {% endif %}
                            {% if car.car_photo2 %}
                              <a href="{{ car.car_photo2.url }}" class="hidden" >
                                <img class="hidden" src="{{ car.car_photo2.url }}">
                              </a>
                            {% endif %}
                            {% if car.car_photo3 %}
                              <a href="{{ car.car_photo3.url }}" class="hidden">
                                <img class="hidden" src="{{ car.car_photo3.url }}">
                              </a>
                            {% endif %}
                            {% if car.car_photo4 %}
                              <a href="{{ car.car_photo4.url }}" class="hidden">
                                <img class="hidden" src="{{ car.car_photo4.url }}">
                              </a>
                            {% endif %}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="detail">
                    <h1 class="title">
                      <a href="{% url 'car_detail' car.id %}">{{ car.car_title }}</a>
                    </h1>
                    <div class="location">
                      <a href="{% url 'car_detail' car.id %}">
                        <i class="flaticon-pin"></i>{{ car.state }}, {{ car.city }}
                      </a>
                    </div>
                    <ul class="facilities-list clearfix">
                      <li>{{ car.fuel_type }}</li>
                      <li>{{ car.miles | intcomma }} km</li>
                      <li>{{ car.transmission }}</li>
                      <li>{{ car.body_style }}</li>
                      <li>{{ car.color }}</li>
                      <li>{{ car.year }}</li>
                    </ul>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
          <!-- Page navigation start -->
          <div class="pagination-box p-box-2 text-center">
            <nav aria-label="Page navigation example">
              {% if cars.has_other_pages %}
                <ul class="pagination">
                  {% if cars.has_previous %}
                    <li class="page-item">
                      <a class="page-link" href="?page={{ cars.previous_page_number }}"><i class="fa fa-angle-left"></i></a>
                    </li>
                  {% else %}
                    <li class="page-item disabled">
                      <a class="page-link"><i class="fa fa-angle-left"></i></a>
                    </li>
                  {% endif %}

                  {% for i in cars.paginator.page_range %}
                    {% if cars.number == i %}
                      <li class="page-item"><a class="page-link active" href="#">{{ i }}</a></li>
                    {% else %}
                      <li class="page-item"><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
                    {% endif %}
                  {% endfor %}

                  {% if cars.has_next %}
                    <li class="page-item">
                      <a class="page-link" href="?page={{ cars.next_page_number }}"><i class="fa fa-angle-right"></i></a>
                    </li>
                  {% else %}
                    <li class="page-item disabled">
                      <a class="page-link"><i class="fa fa-angle-right"></i></a>
                    </li>
                  {% endif %}

                </ul>
              {% endif %}
            </nav>
          </div>
        </div>
        <div class="col-lg-4 col-md-12">
          <div class="sidebar-right">
            <!-- Advanced search start -->
            <div class="widget advanced-search2">
              <h3 class="sidebar-title">Search your desire car</h3>
              <form action="{% url 'search' %}" method="">
          <div class="form-group">
            <input type="text" name="keyword" placeholder="Search by name" class="form-control">
          </div>
          <div class="form-group">
            <select class="form-control search-fields" name="model">
              <option selected="true" disabled="disabled">Model</option>
              {% for model in model_search %}
                <option value="{{ model }}">{{ model }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group">
            <select class="form-control search-fields" name="city">
              <option selected="true" disabled="disabled">Location</option>
              {% for city in city_search %}
                <option value="{{ city }}">{{ city }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group">
            <select class="form-control search-fields" name="year">
              <option selected="true" disabled="disabled">Year</option>
              {% for year in year_search %}
                <option value="{{ year }}">{{ year }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group">
            <select class="form-control search-fields" name="body_style">
              <option selected="true" disabled="disabled">Select Type Of Car</option>
              {% for body_style in body_style_search %}
                <option value="{{ body_style }}">{{ body_style }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="range-slider clearfix">
            <label>Price</label>
            <div data-min="0" data-max="150000"  data-min-name="min_price" data-max-name="max_price" data-unit="USD" class="range-slider-ui ui-slider" aria-disabled="false"></div>
            <div class="clearfix"></div>
          </div>
          <div class="form-group">
            <button class="btn btn-block button-theme btn-md">
              <i class="fa fa-search"></i> Search
            </button>
          </div>
        </form>
            </div>

            <!-- Question start -->
            <div class="widget question widget-3">
              <h5 class="sidebar-title">Follow us</h5>
              <div class="social-list clearfix">
                <ul>
                  <li><a href="#" class="facebook-bg"><i class="fa fa-facebook"></i></a></li>
                  <li><a href="#" class="twitter-bg"><i class="fa fa-twitter"></i></a></li>
                  <li><a href="#" class="google-bg"><i class="fa fa-google-plus"></i></a></li>
                  <li><a href="#" class="rss-bg"><i class="fa fa-rss"></i></a></li>
                  <li><a href="#" class="linkedin-bg"><i class="fa fa-linkedin"></i></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Featured car end -->
{% endblock %}